<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb>
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>项目管理</el-breadcrumb-item>
			<el-breadcrumb-item>项目编辑</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<el-row :gutter="25"><!-- 间隙 -->
				<!-- 搜索区域 -->
				<el-col :span="20"><!-- 列宽 -->
					<el-input placeholder="请输入搜索内容">
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</el-col>
			</el-row>
			<el-table :data="projectList" style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<!-- <el-form-item label="项目名称">
								<span>{{ props.row.project_name }}</span>
							</el-form-item>
							<el-form-item label="项目状态">
								<span>{{ props.row.project_status }}</span>
							</el-form-item>
							<el-form-item label="开始日期">
								<span>{{ props.row.plan_start_time }}</span>
							</el-form-item>
							<el-form-item label="结束日期">
								<span>{{ props.row.plan_end_time }}</span>
							</el-form-item>
							<el-form-item label="投资金额">
								<span>{{ props.row.project_cost }}</span>
							</el-form-item>
							<el-form-item label="项目经理">
								<span>{{ props.row.project_manager }}</span>
							</el-form-item> -->
							<el-form-item label="项目描述:">
								<span>{{ props.row.disc }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="项目名称" prop="project_name">
				</el-table-column>
				<el-table-column label="项目状态" prop="project_status">
				</el-table-column>
				<el-table-column label="开始日期" prop="plan_start_time">
				</el-table-column>
				<el-table-column label="预期结束日期" prop="plan_end_time">
				</el-table-column>
				<el-table-column label="投资金额" prop="project_cost">
				</el-table-column>
				<el-table-column label="项目经理" prop="project_manager">
				</el-table-column>
				<!-- <el-table-column label="项目描述" prop="disc">
				</el-table-column> -->

				<el-table-column label="操作">
				      <template slot-scope="scope">
						<el-button
						  size="mini"
						  type="primary"
						  @click="showEditDialog(scope.row.id)">修改</el-button>
				        <el-button
				          size="mini"
						  type="danger"
				          @click="removeById(scope.row.id)">删除</el-button>
				      </template>
					  </el-table-column>
			</el-table>
		</el-card>
		<!-- 修改项目列表的对话框 -->
		<el-dialog title="修改人员信息" :visible.sync="EditDialogVisible" width="50%" @close="editDialogClosed">
			<el-form :model="handleEditFrom" :rules="handleEditFromRules" ref="handleEditFromRef" label-width="70px">
				<el-form-item label="项目名称" >
					<el-input v-model="handleEditFrom.project_name" ></el-input>
				</el-form-item>
				<el-form-item label="项目状态" >
					<el-select v-model="handleEditFrom.project_status"  placeholder="请选择项目状态" >
						<el-option label="未开始" value="未开始"></el-option>
						<el-option label="已开始" value="已开始"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="开始日期" >
					<el-input v-model="handleEditFrom.plan_start_time"></el-input>
				</el-form-item>
				<el-form-item label="预期结束日期" >
					<el-input v-model="handleEditFrom.plan_end_time"></el-input>
				</el-form-item>
				<el-form-item label="投资金额" >
					<el-input v-model="handleEditFrom.project_cost"></el-input>
				</el-form-item>
				<el-form-item label="项目经理" >
					<el-input v-model="handleEditFrom.project_manager"></el-input>
				</el-form-item>
				<el-form-item label="项目描述" >
					<el-input v-model="handleEditFrom.disc"></el-input>
				</el-form-item>
				
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="EditDialogVisible = false">取 消</el-button>
				<el-button type="primary" class="btnAdd" @click="editprojectInfo()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		created() {
			this.getProjectList();
		},

		data() {
			return {
				//查询信息实体
				queryInfo: {
					query: "", //查询信息
					pageNum: 1, //当前页
					pageSize: 5, //每页最大数
				},
				queryInfo1: {
					//和后端QueryInfo实体的属性一致
					id: JSON.parse(window.sessionStorage.getItem('user')).id,
					pageNum: 1,
					pageSize: 5,
				},

				projectList: [], //项目列表
				total: 0, //总记录数
				search: '',
				EditDialogVisible: false, //控制修改人员信息对话框的显示与隐藏
				handleEditFrom: {
					name:'',
					email: '',
					phone: '',
				},
				handleEditFromRules: {
					email: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],
					phone: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ]
				},
			}
		},

		methods: {
			//获取所有项目
			async getProjectList() {
				const {
					data: resString
				} = await this.$http.get("project", {
					params: this.queryInfo1
				});
				this.projectList = resString.projectList;
			},
			
			async showEditDialog(id) {
				this.EditDialogVisible = true;
				const {
					data: resString2
				} = await this.$http.get('getupdateproject?id=' + id);
				this.handleEditFrom = resString2;
			},
			// 监听编辑话框的关闭事件
			editDialogClosed() {
				// 表单内容重置为空
				this.$refs.handleEditFromRef.resetFields()
			},
			editprojectInfo() {
			     this.$refs.handleEditFromRef.validate(async valid=> {
					 var _this=this; 
					  if (valid) {
					  //发起修改用户的数据请求
					const {
						data: res
						} = await this.$http.get('editproject',{
					params: this.handleEditFrom
				});
				   if(res!=="ok")return this.$message.error('修改项目失败');
				  }
				  //关闭对话框
				  this.EditDialogVisible=false;
				  //刷新数据列表
				  this.getProjectList();
				  //提示修改成功
				  this.$message.success('修改项目成功');
				   })
			    }, 

			// 点击确认 删除该项目
			 async removeById(id){
			//console.log(id)
				//弹框询是否确定删除
			 const confirmResult = await this.$confirm('确认删除该项目?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        },
					).catch(err => err)
			if(confirmResult!=="confirm"){
				return this.$message.info('已取消删除');
			}
			const{data:spa} = await this.$http.delete("deleteproject?id=" + id)
				if(spa!=="ok"){
					return this.$message.error('删除项目失败！');
				}
				this.$message.success('删除项目成功！');
				this.getProjectList();	
			} 
		}
	}
</script>

<style lang="less" scoped>
	.box {
		margin-bottom: 10px;

	}

	.el-breadcrumb {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 17px;
		font-weight: 700;
	}


	.el-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
		margin: 10px;
	}
</style>
